<template>
<MenuPage 
    :columns="logCol" 
    :data="logsList" 
    :page.sync="startPage"
    :size.sync="pageSize"
    :total="total"
    :loading="loading"
    @queryFun="getLogs">
    <template slot="search">
      
        <DatePicker v-model="logTime" :options="options2" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"  placement="bottom-end"
        placeholder="请选择时间段" style="width: 300px" :clearable='false' @on-ok='changeTime' ></DatePicker>
        <i-select v-model="filterRootOrDesi" style="width: 150px;margin: 0 15px;" @on-change="changeUserType">
            <Option value="all">全部人员类型</Option>
            <Option value="designer">设计师</Option>
            <Option value="experimenter">操作员</Option>
<!--            <Option value="designer,leader">单位管理员</Option>-->
<!--            <Option value="designer,member">单位设计师</Option>-->
<!--            <Option value="designer,referee">裁判</Option>-->
<!--&lt;!&ndash;            <Option value="designer,exp-designer">课件设计师</Option>&ndash;&gt;-->
<!--            <Option value="experimenter,tester">操作员</Option>-->
        </i-select>
      
        <i-select v-model="logType" style="width: 150px;margin-right: 15px;" @on-change="changeLogType" >
            <Option value="all">全部日志类型</Option>
            <!-- <Option value="login">登录日志</Option>
            <Option value="user">人员操作日志</Option>
            <Option value="experimenterGroups">实验组操作日志</Option>
            <Option value="noticeMessage">公告日志</Option>
            <Option value="topoTemplate">工程模板操作日志</Option>
            <Option value="userAccess">人员接入日志</Option>
            <Option value="expGuide">指导书操作日志</Option>
            <Option value="topo">工程拓扑操作日志</Option>
            <Option value="image">镜像操作日志</Option>
            <Option value="file">文件操作日志</Option>
            <Option value="experiment">课件操作日志</Option>
            <Option value="question">试题库操作日志</Option>
            <Option value="nsrep-competetopo">场景工程日志</Option>
            <Option value="nsrep-process">导调日志</Option>
            <Option value="nsrep-compete">竞赛演练</Option> -->
            <Option v-for="(value,key) in logMenusList" :key="key" :value="key" :label="value"></Option>
        </i-select>


        <Button
            type="primary"
            ghost
            @click="showLogBtn"
            style="margin-right:15px"
        ><i class="el-icon-document"  style="margin-right: 6px;"/>日志统计图</Button>
  
  
        <Button
            type="primary"
            ghost
            @click="showTopBtn"
            style="margin-right:15px"
        ><i class="el-icon-data-line" style="margin-right: 6px;"/>TOP统计图</Button>
      
        <Button @click="refreshProject"><i class="el-icon-refresh-right" /></Button>
    </template>
        <!-- 日志统计 -->
        <Modal v-model="logInfoModel" :title="modalTitle" :footer-hide="true" width="874" :mask-closable='false'>
            <div style="width: 100%;">
                <div class="log-filter-wrap2">
                    <div style="display: flex;justify-content: space-between;">
                        <div class="top-text" :class='{active:isDayLog}' @click="showLogInfoBtn">逐日</div>
                        <Divider type="vertical" />
                        <div class="top-text" :class='{active:!isDayLog}' @click="showHourLogInfoBtn">逐时</div>
                    </div>
                    <div>
                        <Select filterable v-model="userid" filterable placeholder="单位所有人员" style="width: 150px;" @on-change="changeUserLog">
                            <Option v-for='(item,key) in usersArr' :key='item.id' :value="item.id" :title="item.username">{{item.username}}</Option>
                        </Select>
                        <DatePicker v-model="logInfoTime" :options="options3" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"  placement="bottom-end"
                        placeholder="请选择时间段" style="width: 300px;margin: 0 15px;" :clearable='false' @on-ok='changeLogInfoTime' v-show='isDayLog'></DatePicker>
                        <DatePicker v-model='selectDayVal' type="date" placeholder="请选择日期" style="width: 200px;margin: 0 15px;" v-show='!isDayLog' @on-change='changDay'></DatePicker>
                        <i-select v-model="logType2" style="width: 150px;" @on-change="changeLogType2">
                            <Option value="all">全部日志类型</Option>
                            <Option v-for="(value,key) in logMenusList" :key="key" :value="key" :label="value"></Option>
                            <!-- <Option value="login">登录日志</Option>
                            <Option value="user">人员操作日志</Option>
                            <Option value="experimenterGroups">客户组操作日志</Option>
                            <Option value="noticeMessage">公告日志</Option>
                            <Option value="topoTemplate">工程模板操作日志</Option>
                            <Option value="userAccess">人员接入日志</Option>
                            <Option value="expGuide">指导书操作日志</Option>
                            <Option value="topo">工程拓扑操作日志</Option>
                            <Option value="image">镜像操作日志</Option>
                            <Option value="file">文件操作日志</Option>
                            <Option value="experiment">课件操作日志</Option>
                            <Option value="question">试题库操作日志</Option>
                            <Option value="nsrep-competetopo">场景工程日志</Option>
                        	<Option value="nsrep-process">导调日志</Option>
                        	<Option value="nsrep-compete">竞赛演练</Option> -->
                        </i-select>
                        <Button style="margin-left: 15px;" @click='refreshLog'><i class="el-icon-refresh-right" /></Button>
                    </div>
                </div>
                <div id="log-info-line" v-show='dataIsShow'></div>
                <NoData style="height: 500px;" v-show='defIsShow'></NoData>
            </div>
        </Modal>

        <!-- TOP统计图 -->
        <Modal v-model="topModel" title="TOP统计图" :footer-hide="true" width="874" :mask-closable='false'>
            <div style="width: 100%;">
                <div class="top-model">
                    <div style="display: flex;justify-content: space-between;">
                        <div class="top-text" :class='{active:active1}' @click="switchTop('1')">使用最多的接口</div>
                        <Divider type="vertical" />
                        <div class="top-text" :class='{active:active2}' @click="switchTop('2')">使用接口最多的人员</div>
                    </div>
                    <div>
                        <i-select v-show='active1' v-model='interTenTime' style="width: 100px;margin: 0 15px;" @on-change='changeInter'>
                            <Option value="oneWeek">近一周</Option>
                            <Option value="oneMonth">近一个月</Option>
                            <Option value="threeMonth">近三个月</Option>
                        </i-select>
                        <i-select v-show='active2' v-model='userTenTime' style="width: 100px;margin: 0 15px;" @on-change='changeUserTimes'>
                            <Option value="oneWeek">近一周</Option>
                            <Option value="oneMonth">近一个月</Option>
                            <Option value="threeMonth">近三个月</Option>
                        </i-select>
                    </div>
                </div>
                <div v-show='active1'>
                    <div id="inter-ten-echart" v-show='showInterTen'></div>
                    <NoData style="height: 400px;" v-show='interTenDefFlag'></NoData>
                </div>
                <div v-show='active2'>
                    <div id="user-ten-echart" v-show='showUserTen'></div>
                    <NoData style="height: 400px;" v-show='userTenDefFlag'></NoData>
                </div>
            </div>
        </Modal>

</MenuPage>
</template>


<script>
    let elementResizeDetectorMaker = require("element-resize-detector");
    import this_$echarts from "@/libs/echart-import";
    import echarts from 'echarts'
    import {logs,manyDayDateRangeTotal,manyHourDateRangeTotal} from '@/api/homer.js'
    import {getCompanyData,getUseInterFaceTen,getUseInterByUserTen,getLogMenus} from '@/api/company.js'
    import {baseInfo} from '@/api/login.js'
    import $Moment from 'moment'
    import {mapState} from 'vuex'
    export default {
        components:{},
        data () {
            return {
                sendData:{
                    name:'日志管理',
                    path:'operatLog',
                    children:[],
                },
                companyId:'',
                // 日志参数
                startPage:1,
                pageSize:10,
                startTime:'',
                endTime:'',
                userType:'',
                // 过滤
                filterRootOrDesi:'all',
                logType:'all',
                // 记录
                logsList:[],
                logCol:[
                    {
                        title: '用户名',
                        key: 'username',
                        align: 'left',
                        tooltip:true
                    },
                    {
                        title: '账号类型',
                        key: 'userType',
                        align: 'left',
                        render:(h,params)=>{
                            
                            let text = ''
                            let type = params.row.userType
                            let role = params.row.userRole
                            if(type ==='experimenter'){
                                text = '操作员'
                            }else if(role ==='referee' && type ==='designer'){
                              text = '裁判'
                            }else{
                                text = '设计师'
                            }
                            return h('div',text)
                        }
                    },
                    {
                        title: '操作',
                        key: 'apiNameCn',
                        align: 'left',
                        tooltip:true
                    },
                    {
                        title: '操作结果',
                        key: 'description',
                        align: 'left',
                        tooltip:true
                    },
                    {
                        title: '操作时间',
                        key: 'dataTime',
                        align: 'left',
                        tooltip:true
                    },
                ],
                loading:false,
                total:0,
                logTime:[],
                options2: {
                    shortcuts: [
                        {
                            text: '近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                // 日志信息
                isDayLog:true,
                modalTitle:'日志统计图',
                logInfoModel:false,
                logEchart:null,
                options3: {
                    shortcuts: [
                        {
                            text: '近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                    ]
                },
                logInfoTime:[],
                startTime2:'',
                endTime2:'',
                logType2:'all',
                dataIsShow:true,
                defIsShow:false,
                // 单位内人员集合
                usersArr:[],
                userid:'all',
                selectDayVal:$Moment().format("YYYY-MM-DD"),
                // top数据
                showInterTen:true,
                showUserTen:true,
                interTenDefFlag:false,
                userTenDefFlag:false,
                interTenEchart:null,
                userTenEchart:null,
                interTenTime:'oneWeek',
                userTenTime:'oneWeek',
                topModel:false,
                //
                active1:false,
                active2:false,
                //日志类型列表
                logMenusList:''
            }
        },
        computed:{
            pageTitle () {
                //当前菜单显示名
                return this.$route.meta.title;
            },
            ...mapState('style', {
                echartXColor: ({ themeConfig }) => {
                    return themeConfig.echartXColor;
                },
                echartYColor: ({ themeConfig }) => {
                    return themeConfig.echartYColor;
                },
                echartXLineColor: ({ themeConfig }) => {
                    return themeConfig.echartXLineColor;
                },
                echartYLineColor: ({ themeConfig }) => {
                    return themeConfig.echartYLineColor;
                },
                echartSeriesColor: ({ themeConfig }) => {
                    return themeConfig.echartSeriesColor;
                },
                echartSeriesAreaColor: ({ themeConfig }) => {
                    return themeConfig.echartSeriesAreaColor;
                },
                barChartColor: ({ themeConfig }) => {
                    return [themeConfig.echartSeriesColor1, themeConfig.echartSeriesColor2];
                }
            })
        },
        filters:{

        },
        created(){
            this.getCompanyId()
        },
        mounted(){
            // this.setStyle()
            // window.onresize = () => {
            //     this.setStyle()
            // }
            this.logEchart = this_$echarts.init(document.getElementById('log-info-line'))
            this.interTenEchart = this_$echarts.init(document.getElementById('inter-ten-echart'))
            this.userTenEchart = this_$echarts.init(document.getElementById('user-ten-echart'))
            // 设置起始时间
            this.startTime = $Moment().subtract(7, "days").format("YYYY-MM-DD HH:mm:ss")
            this.endTime = $Moment().format("YYYY-MM-DD HH:mm:ss")
            this.logTime[0] = this.startTime
            this.logTime[1] = this.endTime
            this.startTime2 = $Moment().subtract(7, "days").format("YYYY-MM-DD HH:mm:ss")
            this.endTime2 = $Moment().format("YYYY-MM-DD HH:mm:ss")
            this.logInfoTime[0] = this.startTime2
            this.logInfoTime[1] = this.endTime2
            // 获取操作记录
            this.getLogs()
            // 获取单位人员数据
            this.getCompanyUsers()

            // 重置echarts样式
            this.resetSize()
            //获取操作日志列表菜单
            this.getLogMenus()
        },
        watch: {

        },
        beforeDestroy () { // 组件卸载释放chart内存
            let _this = this
            if (this.logEchart) {
                this.logEchart.clear() // 清空图表
                this.logEchart.dispose() // 释放图表组件
                this.logEchart = null
            }
            if (this.interTenEchart) {
                this.interTenEchart.clear() // 清空图表
                this.interTenEchart.dispose() // 释放图表组件
                this.interTenEchart = null
            }
            if (this.userTenEchart) {
                this.userTenEchart.clear() // 清空图表
                this.userTenEchart.dispose() // 释放图表组件
                this.userTenEchart = null
            }
        },
        methods:{
            // 设置高度
            setStyle(){
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                this.fullHeight = window.fullHeight;
                this.fullWidth = window.fullWidth;
                let hei = this.fullHeight - 72 - 40 - 52 - 49 - 64
                this.pageSize = Math.floor(hei/50) - 1
            },
             // 窗口变化重绘echarts
             resetSize(){
                let erd = elementResizeDetectorMaker();
                let that = this;
                erd.listenTo(document.getElementById("log-info-line"), function (element) {
                    that.$nextTick(function () {
                        //使echarts尺寸重置
                        this.logEchart.resize()
                    })
                })
                erd.listenTo(document.getElementById("inter-ten-echart"), function (element) {
                    that.$nextTick(function () {
                        //使echarts尺寸重置
                        this.interTenEchart.resize()
                    })
                })
                erd.listenTo(document.getElementById("user-ten-echart"), function (element) {
                    that.$nextTick(function () {
                        //使echarts尺寸重置
                        this.userTenEchart.resize()
                    })
                })
            },
            // 获取操作记录
            getLogs(){
                let params = {
                    startPage:this.startPage,
                    pageSize:this.pageSize,
                    startTime:this.startTime,
                    endTime:this.endTime,
                    company:this.companyId,
                }
                if(this.userType != ''){
                    params.userType = this.userType
                }
                if(this.filterRootOrDesi != 'all'){
                    params.userType = this.filterRootOrDesi.split(',')[0]
                    params.userRole = this.filterRootOrDesi.split(',')[1]
                }
                if(this.logType != 'all'){
                    params.action = this.logType
                }
                this.loading = true
                logs(params)
                .then(res=>{
                    if(res.data.code === 1){
                        this.logsList = res.data.data.list
                        this.total = res.data.data.total
                    }
                    this.loading = false
                })
                .catch(err=>{
                    this.loading = false
                    console.log(err)
                })
            },
            logOnChange(val){
                this.startPage = val
                this.getLogs()
            },
            changeTime(){
                if(this.logTime.length > 0){
                    this.startTime = $Moment(this.logTime[0]).format("YYYY-MM-DD HH:mm:ss")
                    this.endTime = $Moment(this.logTime[1]).format("YYYY-MM-DD HH:mm:ss")
                    this.getLogs()
                }
            },
            clearTime(){  // 不提供清空
                this.logTime = []
                this.startTime = $Moment().subtract(7, "days").format("YYYY-MM-DD HH:mm:ss")
                this.endTime = $Moment().format("YYYY-MM-DD HH:mm:ss")
                this.startPage = 1
                this.getLogs()
            },
            changeUserType(val){
                this.startPage = 1
                this.getLogs()
            },
            changeLogType(val){
                this.startPage = 1
                this.getLogs()
            },
            refreshProject(){
                this.logTime = []
                this.startTime = $Moment().subtract(7, "days").format("YYYY-MM-DD HH:mm:ss")
                this.endTime = $Moment().format("YYYY-MM-DD HH:mm:ss")
                this.logTime[0] = this.startTime
                this.logTime[1] = this.endTime
                this.logType = 'all'
                this.filterRootOrDesi = 'all'
                this.startPage = 1
                this.getLogs()
            },
            // 日志新样式
            showLogBtn(){
                this.logInfoModel = true
                this.showLogInfoBtn()
            },
            // 日志统计
            showLogInfoBtn(){
                this.isDayLog = true
                // this.modalTitle = '逐天日志数量统计图'
                this.logEchart.clear() // 清空图表
                this.logEchart.showLoading({maskColor: 'transparent',text : '加载中...',color:'#2d8cf0',textColor:'#2d8cf0'})
                this.resetVal()
                this.getMoreDayLog()
            },
            showHourLogInfoBtn(){
                this.isDayLog = false
                // this.modalTitle = '逐时日志数量统计图'
                this.logEchart.clear() // 清空图表
                this.logEchart.showLoading({maskColor: 'transparent',text : '加载中...',color:'#2d8cf0',textColor:'#2d8cf0'})
                this.resetVal2()
                this.getMoreHourLog()
            },
            // 调用多天逐天日志量
            getMoreDayLog(){
                let params = {
                    startTime: this.startTime2,
                    endTime: this.endTime2,
                }
                if(this.logType2 != 'all'){
                    params.action = this.logType2
                }
                if(this.userid != 'all'){
                    params.userKey = this.userid
                }
                let data1 = []
                let data2 = []
                manyDayDateRangeTotal(params)
                .then(res=>{
                    if(res.data.code === 1){

                        let getData = res.data.data
                        for(let i=0;i<getData.length;i++){
                            let key1 = getData[i].key.split(' ')[0]
                            data1.push(key1)
                            data2.push(getData[i].docCount)
                        }
                        if(getData.length > 0){
                            this.dataIsShow = true
                            this.defIsShow = false
                        }else{
                            this.dataIsShow = false
                            this.defIsShow = true
                        }
                        this.logEcharts(data1,data2)
                    }else{
                        this.dataIsShow = false
                        this.defIsShow = true
                    }
                    this.logEchart.hideLoading()
                })
                .catch(err=>{
                    this.dataIsShow = false
                    this.defIsShow = true
                    console.log(err)
                })
            },
            changeLogInfoTime(){
                if(this.logInfoTime.length > 0){
                    this.startTime2 = $Moment(this.logInfoTime[0]).format("YYYY-MM-DD HH:mm:ss")
                    this.endTime2 = $Moment(this.logInfoTime[1]).format("YYYY-MM-DD HH:mm:ss")
                    this.getMoreDayLog()
                }
            },
            changeLogType2(){   // 逐天、逐时共用
                if(this.isDayLog){
                    this.getMoreDayLog()
                }else{
                    this.getMoreHourLog()
                }
            },
            changeUserLog(val){  // 逐天、逐时共用
                if(this.isDayLog){
                    this.getMoreDayLog()
                }else{
                    this.getMoreHourLog()
                }
            },
            refreshLog(){  // 清空搜索
                if(this.isDayLog){
                    this.resetVal()
                    this.getMoreDayLog()
                }else{
                    this.resetVal2()
                    this.getMoreHourLog()
                }
            },
            // echarts图
            logEcharts(data1, data2) {
                let option = {
                    grid: {
                        top: '30',
                        left: '3%',
                        bottom: '3%',
                        right: '30px',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'var(--echart-tip-bgcolor)',
                        borderColor: 'var(--echart-tip-bgcolor)',
                        textStyle: {
                            color: 'var(--echart-tip-color)' //设置文字颜色
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: data1,
                        // 字体颜色
                        offset: 7,
                        axisLabel: {
                            textStyle: {
                                color: this.echartXColor
                            }
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            formatter: '{value}(条)',
                            textStyle: {
                                color: this.echartYColor
                            }
                        },
                        axisLine: {
                            show: false
                        }, //取消坐标轴线
                        axisTick: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: this.echartYLineColor
                            }
                        }
                    },
                    series: [
                        {
                            data: data2,
                            type: 'line',
                            itemStyle: {
                                color: this.barChartColor[1]
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: this.barChartColor[0]
                                    },
                                    {
                                        offset: 1,
                                        color: this.barChartColor[1]
                                    }
                                ])
                            }
                        }
                    ]
                };
                this.logEchart.setOption(option);
            },
            resetVal(){
                this.logType2 = 'all'
                this.userid = 'all'
                this.startTime2 = $Moment().subtract(7, "days").format("YYYY-MM-DD HH:mm:ss")
                this.endTime2 = $Moment().format("YYYY-MM-DD HH:mm:ss")
                this.logInfoTime[0] = this.startTime2
                this.logInfoTime[1] = this.endTime2
            },
            // 逐时的日志
            getMoreHourLog(){
                let params = {
                    date:this.selectDayVal,
                }
                if(this.logType2 != 'all'){
                    params.action = this.logType2
                }
                if(this.userid != 'all'){
                    params.userKey = this.userid
                }
                let data1 = []
                let data2 = []
                manyHourDateRangeTotal(params)
                .then(res=>{
                    if(res.data.code === 1){
                        let getData = res.data.data
                        for(let i=0;i<getData.length;i++){
                            let key1 = getData[i].key.split(' ')[1]
                            data1.push(key1)
                            data2.push(getData[i].docCount)
                        }
                        if(getData.length > 0){
                            this.dataIsShow = true
                            this.defIsShow = false
                        }else{
                            this.dataIsShow = false
                            this.defIsShow = true
                        }
                        this.logEcharts(data1,data2)
                    }else{
                        this.dataIsShow = false
                        this.defIsShow = true
                    }
                    this.logEchart.hideLoading()
                })
                .catch(err=>{
                    this.dataIsShow = false
                    this.defIsShow = true
                })
            },
            changDay(val){
                this.selectDayVal = val
                this.getMoreHourLog()
            },
            resetVal2(){
                this.logType2 = 'all'
                this.userid = 'all'
                this.selectDayVal = $Moment().format("YYYY-MM-DD")
            },
            // 获取单位内所有人员
            getCompanyUsers(){
                let params = {
                    pageIndex:1,
                    pageSize:10000,
                    order:'desc',
                    sortBy:'created',
                }
                getCompanyData(params)
                    .then(res=>{
                        if(res.data.code == 1){
                            this.usersArr = res.data.data.items;
                        }else{
                            this.usersArr = []
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            //  接口使用top10
            useInterfaceTen(params){
                this.interTenEchart.showLoading({maskColor: 'transparent',text : '加载中...',color:'#2d8cf0',textColor:'#2d8cf0'})
                getUseInterFaceTen(params)
                .then(res=>{
                    if(res.data.code === 1){
                        let getData = res.data.data
                        if(getData.length == 0){
                            this.showInterTen = false
                            this.interTenDefFlag = true
                            return false
                        }
                        let arr1 = []
                        let arr2 = []
                        this.showInterTen = true
                        this.interTenDefFlag = false
                        for(let i=0;i<getData.length;i++){
                            arr1.push(getData[i].keyCn)
                            arr2.push(getData[i].docCount)
                        }
                        this.drawEcharts(arr1,arr2,'interface')
                    }else{
                        this.$Message.error({content:res.message,duration:3})
                    }
                    this.interTenEchart.hideLoading()
                })
                .catch(err=>{
                    this.interTenEchart.hideLoading()
                    console.log(err)
                })
            },
            // 使用接口最多的人员top10
            useInterByUserTen(params){
                this.userTenEchart.showLoading({maskColor: 'transparent',text : '加载中...',color:'#2d8cf0',textColor:'#2d8cf0'})
                getUseInterByUserTen(params)
                .then(res=>{
                    if(res.data.code === 1){
                        let getData = res.data.data
                        if(getData.length == 0){
                            this.showUserTen = false
                            this.userTenDefFlag = true
                            return false
                        }
                        let arr1 = []
                        let arr2 = []
                        this.showUserTen = true
                        this.userTenDefFlag = false
                        for(let i=0;i<getData.length;i++){
                            arr1.push(getData[i].username)
                            arr2.push(getData[i].docCount)
                        }
                        this.drawEcharts(arr1,arr2,'user')
                    }else{
                        this.$Message.error({content:res.message,duration:3})
                    }
                    this.userTenEchart.hideLoading()
                })
                .catch(err=>{
                    this.userTenEchart.hideLoading()
                    console.log(err)
                })
            },
            drawEcharts(arr1, arr2, name) {
                let dataAxis = arr1;
                let data = arr2;
                let text = '次';
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: `{b} : {c}${text}`,
                        backgroundColor: 'var(--echart-tip-bgcolor)',
                        borderColor: 'var(--echart-tip-bgcolor)',
                        textStyle: {
                            color: 'var(--echart-tip-color)' //设置文字颜色#fff
                        },
                    },
                    grid: {
                        left: '3%',
                        bottom: '30px',
                        right: '30px',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: dataAxis,
                            // 字体颜色
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: this.echartXColor
                                },
                                formatter: function(params, index) {
                                    let maxlength = 20;
                                    if (params.length > maxlength) {
                                        params = params.substring(0, maxlength - 1) + '...';
                                    }
                                    if (index % 2 != 0) {
                                        return '\n\n' + params;
                                    } else {
                                        return params;
                                    }
                                }
                            }
                        }
                    ],
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value}' + text,
                            textStyle: {
                                color: this.echartYColor
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: 30, //柱图宽度
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    { offset: 0, color: this.barChartColor[1] },
                                    // { offset: 0.5, color: this.barChartColor[1] },
                                    { offset: 1, color: this.barChartColor[0] }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        { offset: 0, color: this.barChartColor[1] },
                                        // { offset: 0.5, color: this.barChartColor[1] },
                                        { offset: 1, color: this.barChartColor[0] }
                                    ])
                                }
                            },
                            data: data
                        }
                    ]
                };
                if (name === 'interface') {
                    this.interTenEchart.setOption(option);
                } else if (name === 'user') {
                    this.userTenEchart.setOption(option);
                }
            },
            // 切换日期
            changeInter(val){
                this.useInterfaceTen(val)
            },
            changeUserTimes(val){
                this.useInterByUserTen(val)
            },
            // top统计图
            showTopBtn(){
                this.topModel = true
                this.switchTop('1')
            },
            switchTop(val){
                this.interTenTime = 'oneWeek'
                this.userTenTime = 'oneWeek'
                if(val === '1'){
                    this.active1 = true
                    this.active2 = false
                    // 近一周使用最多接口TOP10  默认是一周
                    this.useInterfaceTen('oneWeek')
                }else if(val === '2'){
                    this.active1 = false
                    this.active2 = true
                    // 近一周使用接口最多的人员TOP10  默认是一周
                    this.useInterByUserTen('oneWeek')
                }
            },
            getCompanyId(){
                baseInfo().then(res=>{
                    this.companyId = res.data.data.companyId
                }).catch(err => {
                        resolve();
                    })
            },
            getLogMenus(){
                getLogMenus().then(res=>{
                    if(res.data.code===1){
                       this.logMenusList = res.data.data
                    }
                }).catch(err=>{
                    this.$Message.error({content:err.message,duration:3})
                })
            }
        }
    }
</script>
<style scoped>
    .log-filter-wrap2{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #log-info-line{
        width: 100%;
        height: 500px;
    }
    /* top10样式 */
    .bottom-left{
        /* padding: 30px; */
        height: 460px;
        border-radius: 10px;
    }
    .bottom-right{
        background-color: #fff;
        padding: 30px;
        height: 500px;
        border-radius: 10px;
        position: relative;
    }
    .mygrades{
        display: flex;
        justify-content: space-between;
        color: #333;
        font-size: 16px;
        font-weight: 600;
    }
    .class-exp-top{
        display: flex;
        justify-content: flex-start;
        color: #333;
        align-items: center;
        min-width: 150px;
        font-size: 16px;
        font-weight: 600;
    }
    #inter-ten-echart,#user-ten-echart{
        height: 400px;
        width: 100%;
    }
    .top-text{
        color: #666;
        font-size: 14px;
        cursor: pointer;
    }
    .active{
        font-weight: 600;
        color: var(--url-color);
    }
    .top-model{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
<style>
    .log-filter-wrap2 .ivu-date-picker-prev-btn-arrow-double , .log-filter-wrap2 .ivu-date-picker-next-btn-arrow-double{
        display: none;
    }
    .log-filter-wrap2 .ivu-date-picker-prev-btn-arrow{
        margin-left: 15px;
    }
    .log-filter-wrap2 .ivu-date-picker-next-btn-arrow{
        margin-right: 15px;
    }
    .top-model .ivu-divider-vertical , .log-filter-wrap2 .ivu-divider-vertical{
        height: 16px;
        top: 2px;
        margin: 0 12px;
    }
</style>

